<template>
  <div>
    <!-- 评论框 -->
    <div style="margin-bottom: 40px">
      <div class="comment-head">
        <i class="el-icon-edit-outline" style="font-weight: bold;font-size: 22px;"></i> 留言
      </div>
      <div>
        <!-- 文字评论 -->
        <div v-show="commentStatus">
          <commentBox @submitComment="submitComment"/>
        </div>
      </div>
    </div>

    <!-- 评论内容 -->
    <div v-if="!$common.isEmpty(comments)">
      <!-- 评论数量 -->
      <div class="commentInfo-title">
        <span style="font-size: 1.15rem">Comments | </span>
        <span>{{ count }} 条评论</span>
      </div>
      <!-- 评论详情 -->
      <div id="comment-content" class="commentInfo-detail"
           v-for="(item, index) in comments"
           :key="index">
        <!-- 头像 -->
        <el-avatar shape="square" class="commentInfo-avatar" :size="35" :src="item.avatar"></el-avatar>

        <div style="flex: 1;padding-left: 12px">
          <!-- 评论信息 -->
          <div style="display: flex;justify-content: space-between">
            <div>
              <span class="commentInfo-username">{{ item.username }}</span>
              <span class="commentInfo-master" v-if="item.isAdmin">主人翁</span>
              <span class="commentInfo-other">{{ item.time }}</span>
            </div>
            <div class="commentInfo-reply" @click="replyDialog(item)">
              <span>回复</span>
            </div>
          </div>
          <!-- 评论内容 -->
          <div class="commentInfo-content">
            <span v-html="item.commentContent"></span>
          </div>
          <!-- 回复模块 -->
          <div v-if="!$common.isEmpty(item.child)">
            <div class="commentInfo-detail" v-for="(childItem, i) in item.child" :key="i">
              <!-- 头像 -->
              <el-avatar shape="square" class="commentInfo-avatar" :size="30" :src="childItem.avatar"></el-avatar>

              <div style="flex: 1;padding-left: 12px">
                <!-- 评论信息 -->
                <div style="display: flex;justify-content: space-between">
                  <div>
                    <span class="commentInfo-username-small">{{ childItem.username }}</span>
                    <span class="commentInfo-master" v-if="childItem.isAdmin">主人翁</span>
                    <span class="commentInfo-other">{{ item.time }}</span>
                  </div>
                  <div>
                    <span class="commentInfo-reply" @click="replyDialog(childItem)">回复</span>
                  </div>
                </div>
                <!-- 评论内容 -->
                <div class="commentInfo-content">
                  <template v-if="!$common.isEmpty(childItem.parentUsername)">
                    <span style="color: var(--blue)">@{{ childItem.parentUsername }} </span>:
                  </template>
                  <span v-html="childItem.commentContent"></span>
                </div>
              </div>
            </div>
            <!-- 分页 -->
            <div class="pagination-wrap" v-if="item.child.length < item.childCount">
              <div class="pagination"
                   @click="toChildPage(item)">
                展开
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <proPage :current="floorPage.current"
               :size="floorPage.size"
               :total="maxFloor"
               :buttonSize="6"
               :color="$constant.commentPageColor"
               @toPage="toPage">
      </proPage>
    </div>

    <div v-else class="myCenter" style="color: var(--greyFont)">
      <i>暂时还没人评论哦~</i>
    </div>

    <el-dialog title="留言"
               :visible.sync="replyDialogVisible"
               width="30%"
               :before-close="handleClose"
               :append-to-body="true"
               :close-on-click-modal="false"
               destroy-on-close
               center>
      <div>
        <commentBox @submitComment="submitReply"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const commentBox = () => import( "./commentBox");
const proPage = () => import( "./proPage.vue");

export default {
  components: {
    commentBox,
    proPage
  },
  props: {
    source: {
      type: Number
    },
    type: {
      type: String
    },
    count: {
      type: Number
    },
    commentStatus: {
      type: Boolean
    }
  },
  data() {
    return {
      maxFloor: 0,
      floorPage: {
        current: 1,
        size: 5,
        total: 0,
        articleId: this.source,
      },
      comments: [],
      pagination: {
        current: 1,
        size: 5,
        total: 0,
        articleId: this.source,
        floorNum: 1,
        parentId: null,
      },
      replyDialogVisible: false,
      parentId: 0,
    };
  },

  computed: {},

  created() {
    this.getMaxFloor(this.source);
    this.getComments(this.source);
  },
  methods: {
    getMaxFloor(articleId) {
      this.$createHttp.getMaxFloor(articleId).then((res) => {
        if (res.code === 200) {
          this.maxFloor = res.data;
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: "error"
        });
      });
    },
    getComments() {
      this.$createHttp.getCommentByArticleId(this.floorPage).then((res) => {
        if (res.code === 200) {
          this.comments = res.data;
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: "error"
        });
      });
    },
    //楼层跳转分页
    toPage(page) {
      this.floorPage.current = page;
      window.scrollTo({
        top: document.getElementById('comment-content').offsetTop
      });
      this.getComments();
    },
    toChildPage(item) {
      this.pagination.current += 1;
      this.pagination.parentId = item.id;
      this.$createHttp.getChildComment(this.pagination).then((res) => {
        if (res.code === 200) {
          item.child = item.child.concat(res.data);
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: "error"
        });
      });
    },
    //转换表情
    emoji(comments, flag) {
      comments.forEach(c => {
        c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
        c.commentContent = this.$common.faceReg(c.commentContent);
        c.commentContent = this.$common.pictureReg(c.commentContent);
        if (flag) {
          if (!this.$common.isEmpty(c.childComments) && !this.$common.isEmpty(c.child)) {
            c.child.forEach(cc => {
              c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
              cc.commentContent = this.$common.faceReg(cc.commentContent);
              cc.commentContent = this.$common.pictureReg(cc.commentContent);
            });
          }
        }
      });
    },
    submitComment(commentContent) {
      if (this.type === "article") {
        let comment = {
          articleId: this.source,
          parentId: 0,
          commentContent: commentContent
        }
        this.publish(comment);
      }
    },
    submitReply(commentContent) {
      let comment = {
        articleId: this.source,
        parentId: this.parentId,
        commentContent: commentContent
      }
      this.publish(comment);
      this.handleClose();
    },
    publish(comment) {
      this.$createHttp.publish(comment).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '评论成功'
          });
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: "error"
        });
      });
    },
    replyDialog(comment) {
      this.replyDialogVisible = true;
      this.parentId = comment.id;
    },
    handleClose() {
      this.replyDialogVisible = false;
    }
  }
}
</script>

<style scoped>

.comment-head {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  margin: 40px 0 20px 0;
  user-select: none;
  color: var(--themeBackground);
}

.commentInfo-title {
  margin-bottom: 20px;
  color: var(--greyFont);
  user-select: none;
}

.commentInfo-detail {
  display: flex;
}

.commentInfo-avatar {
  border-radius: 5px;
}

.commentInfo-username {
  color: var(--orangeRed);
  font-size: 16px;
  font-weight: 600;
  margin-right: 5px;
}

.commentInfo-username-small {
  color: var(--orangeRed);
  font-size: 14px;
  font-weight: 600;
  margin-right: 5px;
}

.commentInfo-master {
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 0.2rem;
  font-size: 12px;
  padding: 2px 4px;
  margin-right: 5px;
}

.commentInfo-other {
  font-size: 12px;
  color: var(--greyFont);
  user-select: none;
}

.commentInfo-reply {
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: var(--white);
  background: var(--themeBackground);
  border-radius: 0.2rem;
  padding: 3px 6px;
}

.commentInfo-content {
  margin: 15px 0 25px;
  padding: 18px 20px;
  background: var(--commentContent);
  border-radius: 12px;
  color: var(--black);
  word-break: break-word;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.pagination {
  padding: 6px 20px;
  border: 1px solid var(--lightGray);
  border-radius: 3rem;
  color: var(--greyFont);
  user-select: none;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
}

.pagination:hover {
  border: 1px solid var(--themeBackground);
  color: var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}
</style>
